import React, { Component } from "react";

// 函数的传参问题
// 1. 内联地使用bind
//    bind会改变this指向，同时产生一个新函数
//    bind函数不会立马执行，并且会将第二个参数变成新函数的第一个参数
//    不太好，增加内存

// 2. 内联使用箭头函数
//    () => this.xxx(1)
//    不太好，每次都会产生新内存
//    工作中，这种方式用的最多

//  3. 柯里化curry函数
//     柯里化函数就是闭包
//     推荐。不会增加内存的

class App extends Component {
  handleClick = (n) => () => {
    console.log(n);
  };

  handleClick2 = (n) => {
    return (e) => {
      console.log(n, e);
    };
  };

  // handleClick = (n, e) => {
  //   console.log(n, e);
  // };

  render() {
    return (
      <>
        <h2>事件的传参问题</h2>
        {/* <button onClick={this.handleClick.bind(this, 1)}>btn1</button>
        <button onClick={this.handleClick.bind(this, 2)}>btn2</button> */}

        {/* <button onClick={(e) => this.handleClick(1, e)}>btn1</button>
        <button onClick={() => this.handleClick(2)}>btn2</button> */}

        <button onClick={this.handleClick(1)}>btn1</button>
        <button onClick={this.handleClick(2)}>btn2</button>

        <hr />

        <button onClick={this.handleClick2(4)}>btn3</button>
      </>
    );
  }
}

export default App;
